<template>
  <div>
    <h1>学生信息展示</h1>
    <div class="stuShow">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="stu_id" label="学号"> </el-table-column>
        <el-table-column prop="stu_name" label="姓名"> </el-table-column>
        <el-table-column prop="stu_sex" label="性别"> </el-table-column>
        <el-table-column prop="stu_date" label="出生年月"> </el-table-column>
      </el-table>
      <!-- 目前数据总共 6条   分3页  一页共计2条数据 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="page.total"
        :page-size="page.pageSize"
        :current-page="page.page"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ajax from "../../ajax/ajax";
import { Table, TableColumn, Pagination } from "element-ui";
export default {
  name: "",
  props: [""],
  data() {
    return {
      tableData: [],
      result: [],
      page: {
        page: 1, //默认展示第一页
        total: 0, //总共的条数
        pageSize: 5, //一页展示多少条数据
      },
    };
  },

  components: {
    "el-table": Table,
    "el-table-column": TableColumn,
    "el-pagination": Pagination,
  },

  computed: {},

  beforeMount() {},

  async mounted() {
    /* 假分页  当数据量小 时可以使用 当数据量大了不要这样，卡 用户体验不好 */
    let result = await ajax(
      "get",
      "pagesquery",
      { num: this.page.page },
      "form"
    );
    console.log(result);
    this.tableData = result.group_stuinfo;

    //一页有5条数据  变成一个变量
    this.page.pageSize = result.group_stuinfo.length;
    // 一共有多少页  result.pages
    // total  一共有多少数据
    this.page.total = this.page.pageSize * result.pages;
    console.log(this.page.total);
  },

  methods: {
    async handleCurrentChange(value) {
      console.log(value); //点击的当前的页面
      //当点击哪个页码，根据对应的页码发送对应ajax get
      let result = await ajax("get", "pagesquery", { num: value }, "form");
      console.log(result);
      this.tableData = result.group_stuinfo;

      //一页有5条数据  变成一个变量
      this.page.pageSize = result.group_stuinfo.length;
      // 一共有多少页  result.pages
      // total  一共有多少数据
      this.page.total = this.page.pageSize * result.pages;
      console.log(this.page.total);
    },
  },

  watch: {},
};
</script>
<style lang='css' scoped>
.stuShow {
  margin: 50px;
}
</style>